<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';
import image1 from '../assets/img/image_1.jpg';
import image2 from '../assets/img/image_2.jpg';
import image3 from '../assets/img/image_3.jpg';
import image4 from '../assets/img/image_4.jpg';
import image5 from '../assets/img/image_5.jpg';
import image6 from '../assets/img/image_6.jpg';
import {useRouter} from "vue-router";

interface GreenhouseInfo {
  name: string;
  address: string;
  area: number;
  id: number;
  type: string;
}

interface DeviceInfo {
  id: number;
  type: string;
}

const bgUrl = ref('src/assets/bg.JPG');
const router = useRouter();
// 存储从接口获取的数据
const greenhouseInfo = ref<GreenhouseInfo | null>(null);
const devicesInfo = ref<DeviceInfo[]>([]);

// 轮播图数据
const items = ref([
  { url: image1 },
  { url: image2 },
  { url: image3 },
  { url: image4 },
  { url: image5 },
  { url: image6 }
]);

// 获取大棚信息和设备信息
onMounted(async () => {
  try {
    const greenhouseResponse = await axios.get('/greenhouse/getGreenhouseInfo', {
      params: { greenhouseId: 1 }
    });
    greenhouseInfo.value = greenhouseResponse.data;

    const devicesResponse = await axios.get('/greenhouse/getDevicesInfo', {
      params: { greenhouseId: 1 }
    });
    devicesInfo.value = devicesResponse.data;
  } catch (error) {
    console.error('获取数据失败', error);
  }
});
function realtime(){
  router.push({name: 'realtime'});
}
</script>

<template>
  <div class="h-full w-full flex flex-row "  :style="{ backgroundImage: `url(${bgUrl})` }">
    <!-- 左侧展示大棚信息和设备信息 -->
    <div class="w-40% h-full flex flex-col justify-center items-center">
      <div v-if="greenhouseInfo" class="bg-green-200 p-10 rounded-lg">
        <h2 class="text-10">大棚信息</h2>
        <p><strong>名称：</strong>{{ greenhouseInfo.name }}</p>
        <p><strong>地址：</strong>{{ greenhouseInfo.address }}</p>
        <p><strong>面积：</strong>{{ greenhouseInfo.area }} 平方米</p>
      </div>
      <div @click="realtime" v-if="devicesInfo.length" class="bg-green-200 p-10 rounded-lg mt-10">
        <h2 class="text-8">设备信息</h2>
        <ul>
          <li v-for="device in devicesInfo" :key="device.id">
            <div class="font-500">{{ device.type }} X 1</div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 右侧展示轮播图 -->
    <div class="w-60% h-full m-30">
        <el-carousel :interval="3000" height="720px">
          <el-carousel-item v-for="(item, index) in items" :key="index">
            <img :src="item.url" style="width: 1280px; height:720px;" alt="">
          </el-carousel-item>
        </el-carousel>
    </div>
  </div>
</template>

<style scoped>

</style>
